<template>
	<view class="treeholewrite__box">
		<!-- f1背景图片 -->
		<image src="../../static/img/page_bg.1a0539e5 (1).jpg" mode="aspectFill" class="background-image"></image>
		<!-- f2写信背景 -->
		<view class="background-write1">
			<view class="background-write2">
				<view class="background-write3">
					<text class="text1">亲爱的陌生人：\n</text>
				</view>
				<view class="background-write4">
					<text class="text2">你好！</text>
				</view>
				<!-- f3写信内容 -->
				<view class="background-write5">
				
				<view class="ql-editor">
					<textarea placeholder-style="color:#d6ccb1;" placeholder-class="textarea-placeholder"
						placeholder="信件内容尽量清晰地描述具体事件，这样能更快获得回应。" style="font-size: 17px;
					   text-indent: 34px;
					   width: 100%;
					   line-height: 44px;
					   min-height: 900px;
					   " maxlength="2000" @input="handleInput" />
				</view>

				</view>
				<!-- f4署名内容 -->
				<view class="container1">
					<image class="x1" src='../../static/img/default_avatar.70f94228.png' mode="aspectFit"
						style="height: 26.5px;width: 26.5px;"></image>
					<text class="x2" style="font-weight: 550;font-size: 16px;color: #523d14;"> {{initialValue}}</text>
					<view class="tree_write" @click="showModal()">
						<image src="../../static/img/编辑.svg" mode="aspectFit" style="height: 24px;width: 24px;"></image>
					</view>
				</view>
				<!-- f5字数统计 写信时间-->
				<view class="container2">
					<view class="count">
						<text class="word-count">{{ wordCount }}/2000</text>
						<text class="current-time" style="color: #523d14;">{{ currentDate }}</text>
					</view>
				</view>

			</view>
			<view class="icon">
			</view>

			<view class="icon-x">

			</view>
		</view>

		<!-- f6投进树洞 -->
		<view class="container3">
			<view class="button" :style="buttonStyle" @click="submitLetter">
				<text class="wenzi">{{ buttonText }}</text>
			</view>
		</view>

		<!-- f7提示窗口 -->
		<view v-if="showWarning" class="warning-message">
			<text>请输入信件内容</text>
		</view>
		<!-- f8修改署名弹窗 -->
		<view v-if="showPopup" class="modal-overlay">

			<view class="modal-background"></view>
			<view class="modal-content modal-main">
				<view class="modal-close" @tap="closePopup">×</view>

				<view class="modal-title fw-medium">修改落款署名</view>
				<view class="inputs">
					<image src="../../static/img/download.svg" mode="aspectFit" class="img1"></image>
					<input type="text" v-model="inputValue" placeholder="建议不超过6个字" />
					<image src="../../static/img/刷新 (1).svg" mode="aspectFit" class="img2"></image>
					<text class="huan">换一换</text>
				</view>
				<view class="modal-button-container">
					<view class="modal-button fw-medium" @tap="closePopup">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: "    ",
				wordCount: 0, // 字数统计
				currentDate: this.getCurrentDate(), // 当前日期
				showWarning: false,
				showPopup: false,
				initialValue: "",
				inputValue: "",
				userId: ''
			}
		},
		globalData: {
			newLetterSubmitted: false
		},
		computed: {
			buttonStyle() {
				return {
					backgroundColor: this.wordCount > 0 ? '#f9d681' : '#868e99', // 根据字数改变背景色
					color: this.wordCount > 0 ? '#0b1d29' : '#cfd2d4', // 根据字数改变文字颜色
				};
			},
			buttonText() {
				return this.wordCount > 0 ? '写好了，投进树洞' : '写好了，投进树洞';
			}
		},
		mounted() {
			// 从本地存储读取电话号码
			const phoneNumber = uni.getStorageSync('phone') || '';
			this.initialValue = phoneNumber;
			this.inputValue = phoneNumber;

			const userId = uni.getStorageSync('userId') || ''; // 如果没有存储则默认为空字符串
			console.log('Retrieved userId:', userId); // 打印读取的用户ID
			this.userId = userId;
		},
		methods: {
			ohandleInput(e) {
				this.content = e.detail.html;
			},
			handleInput(e) {
				this.content = e.target.value; // 获取输入的内容
				this.wordCount = this.content.length; // 计算字数
				// 当有输入时，隐藏警告
				if (this.wordCount > 0) {
					this.showWarning = false;
				}
			},
			getCurrentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`; // 格式化日期
			},
			handleClick() {
				if (this.wordCount === 0) {
					this.showWarning = true;
					setTimeout(() => {
						this.showWarning = false;
					}, 4000);
				} else {
					this.showWarning = false;
					console.log("写好了，投进树洞");

					// 设置全局变量
					getApp().globalData.newLetterSubmitted = true;

					// 重定向到首页
					uni.redirectTo({
						url: '/pages/index/index'
					});
				}
			},
			showModal() {
				console.log('被点击')
				this.showPopup = true;
			},
			closePopup() {
				this.showPopup = false
				// 更新初始内容
				this.initialValue = this.inputValue;
			},
			submitLetter() {
			        if (this.wordCount === 0) {
			            this.showWarning = true;
			            setTimeout(() => {
			                this.showWarning = false;
			            }, 4000);
			            return;
			        }
			
			        this.showWarning = false;
			
			        // 准备数据
			        const letterData = {
			            sign: this.initialValue,
			            content: this.content,
			            userId: this.userId
			        };
			
			        // 发送 POST 请求
			        uni.request({
			            url: 'http://localhost:8080/letter/messages/submit', // 确保 URL 正确
			            method: 'POST',
			            header: {
			                'content-type': 'application/json' // 默认值
			            },
			            data: letterData,
			            success: (res) => {
			                console.log(res.data); // 处理后端返回的数据
			                uni.showToast({
			                    title: '信件提交成功',
			                    icon: 'success',
			                    duration: 2000
			                });
			
			                // 设置全局变量
			                getApp().globalData.newLetterSubmitted = true;
			
			                // 重定向到首页
			                uni.redirectTo({
			                    url: '/pages/index/index'
			                });
			            },
			            fail: (err) => {
			                console.error(err); // 处理请求失败的情况
			                uni.showToast({
			                    title: '信件提交失败',
			                    icon: 'none',
			                    duration: 2000
			                });
			            }
			        });
			    }


		}
	}
</script>



<style lang="scss">
	.treeholewrite__box {
	    position: absolute;
	    left: 0;
	    right: 0;
	    top: 0;
	    bottom: 0;
	    overflow-y: auto;
	    -webkit-overflow-scrolling: touch;
	}
	.treeholedraft__quill .ql-editor {
		padding: 0;
		font-size: inherit;
		line-height: inherit;
		color: inherit;
		caret-color: currentColor;
	}

	.ql-editor {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height: 100%;
		padding: .024rem .03rem;
		outline: none;
		overflow-y: auto;
		-o-tab-size: 4;
		tab-size: 4;
		-moz-tab-size: 4;
		line-height: 1.8;
		text-align: justify;
		text-justify: auto;
		white-space: pre-wrap;
		word-break: normal;
		word-wrap: break-word;
		cursor: text;
	}

	.treeholedraft__quill .ql-editor.ql-blank:before {
		text-indent: 2em;
		color: #ccc1a3;
	}

	.ql-editor.ql-blank:before {
		content: attr(data-placeholder);
		font-style: normal;
		pointer-events: none;
		position: absolute;
	}

	.treeholedraft__quill p {
		text-indent: 34px;
	}

	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

	}

	.background-image {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translate(-50%, -50%);
		/* 将图片移动到中心 */
	}

	.background-write1 {
		position: absolute;
		top: 2%;
		left: 4%;
		right: 4%;
		height: 715px;
		background-color: #fffbea;
		z-index: 0;
		border-top-right-radius: 5px;
		border-top-left-radius: 5px;

	}

	.background-write2 {
		position: absolute;
		top: 2%;
		left: 4%;
		right: 4%;
		height: 689px;
		background-color: #fffbea;
		z-index: 0;
	}

	.background-write3 {
		position: relative;
		width: 100%;
		height: 44px;
		background-image: linear-gradient(to right, #e0cbab 3px, transparent 3px);
		background-size: 8px 1px;
		background-repeat: repeat-x;
		background-position: bottom;
		padding-bottom: 1px;
	}

	.background-write4 {
		position: relative;
		width: 100%;
		height: 44px;
		background-image: linear-gradient(to right, #e0cbab 3px, transparent 3px);
		background-size: 8px 1px;
		background-repeat: repeat-x;
		background-position: bottom;
		padding-bottom: 1px;
	}

	.text1 {
		position: absolute;
		color: #523d14;
		font-size: 17px;
		top: 12px;

	}

	.text2 {
		position: absolute;
		color: #523d14;
		font-size: 17px;
		top: 10px;
		left: 34px;
	}


	.ql-editor {
	    /* -webkit-box-sizing: border-box; */
	    box-sizing: border-box;
	    height: 100%;
	    /* padding: .024rem .03rem; */
	    outline: none;
	    overflow-y: auto;
	    -o-tab-size: 4;
	    tab-size: 4;
	    -moz-tab-size: 4;
	    /* line-height: 1.8; */
	    text-align: justify;
	    text-justify: auto;
	    white-space: pre-wrap;
	    word-break: normal;
	    word-wrap: break-word;
	    cursor: text;
	}

	.background-write5 {
		position: relative;
		margin: 0 2px;
		padding: 0 0 10px;
		font-size: 17px;
		line-height: 44px;
		background-image: -webkit-linear-gradient(bottom, #e0cbab .002rem, #fffbea 0);
		background-image: -o-linear-gradient(bottom, #e0cbab .002rem, #fffbea .002rem);
		background-image: linear-gradient(0deg, #e0cbab 1px, #fffbea 0);
		background-size: 100% 44px;
		background-position: 0 0;
		background-repeat: repeat-y;
		height: 550px;
		
	}

	.background-write5::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-image: -webkit-gradient(linear, left top, right top, color-stop(40%, rgba(0, 0, 0, 0)), color-stop(40%, #fffbea));
		background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 40%, #fffbea 0);
		background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 40%, #fffbea 40%);
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, #fffbea 0);
		background-size: 8px 100%;
		background-position: 0 0;
		background-repeat: repeat-x;
		

	}

	.letter-content {
		width: 100%;
		height: 100%;

		box-sizing: border-box;
		border: none;
		background-color: transparent;
		color: #523d14;
		font-size: 17px;
		line-height: 1.5;
		resize: none;
	}

	.textarea-placeholder {
		font-size: 17px;
		overflow-y: auto;

	}

	.container1 {
		position: relative;
		width: 100%;
		height: 20px;
		align-items: center;
		justify-content: flex-end;
		display: flex;
		max-width: 100%;
		width: fit-content;
		margin: 2px 0 0 auto;
		font-size: 16px;
		text-align: right;
		cursor: pointer;
		overflow: hidden;
	}

	.x1 {
		position: relative;


	}

	.x2 {
		position: relative;

	}



	.count {

		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #CCC1A3;
		margin-top: 5px;
		font-weight: 549;
	}

	.word-count {
		flex: 1;

	}

	.current-time {
		text-align: right;

	}

	.icon {
		position: absolute;
		top: 100%;
		left: 6%;
		right: 0%;
		height: 25px;
		background-color: #fffbea;
		z-index: 0;
		border-bottom-right-radius: 5px;

	}

	.icon-x {
		position: absolute;
		width: 24px;
		height: 24px;
		top: 100%;
		background-image: url();
	}

	.button {
		position: fixed;
		top: 92%;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;

		display: flex;
		align-items: center;
		justify-content: center;
		width: 700rpx;
		height: 100rpx;
		border-radius: 60rpx;
		background-color: #868e99;
	}



	.wenzi {

		font-weight: bold;
		font-size: 35rpx;
	}

	.warning-message {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(125, 125, 125, 0.9);
		color: #ffffff;
		font-size: 16px;
		padding: 10px 20px;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		z-index: 100;

	}

	.icon_write {
		position: relative;
		height: 24px;
		width: 24px;
		left: 3px;
		top: 2px;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-background {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 半透明背景 */
	}

	.modal-content {
		background-color: #fffbea;
		border-radius: 10px;

		position: relative;
		overflow: visible;
		padding: 17px 17px;
		z-index: 1;
		/* 确保内容在背景层上面 */
		margin-left: 12.8%;
		/* 左边间隔 */
		margin-right: 12.8%;
		/* 右边间隔 */
	}

	.modal-main {

		flex-grow: 1;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch
	}

	.modal-close {
		position: absolute;
		justify-content: center;
		align-items: center;
		top: 1px;
		right: 10px;
		font-size: 30px;
		cursor: pointer;
		color: #c2bcb2;
	}

	.modal-title {

		margin: 17px 0 0;
		font-size: 18px;
		line-height: 1.33;
		text-align: center;
		color: #523d14;

	}

	.fw-medium {
		font-weight: 600;
	}

	.modal-text {
		margin: 15px 0 0;
		font-size: 17px;
		line-height: 1.5;
		text-align: center;
		color: #523d14;

	}

	.modal-button-container {
		display: flex;
		justify-content: center;
	}

	.modal-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120px;
		height: 46px;
		margin: 25px auto 0;
		font-size: 17px;
		border-radius: 16px;
		color: #704300;
		background: linear-gradient(180deg, #ffefad, #f4ba45);
	}

	.inputs {
		background-color: #f7f2df;
		border-radius: 10px;
		padding: 10px;
		margin: 20px 0;
		display: flex;
		align-items: center;

		inputs {
			font-size: 16px;
			width: 80%;
			text-align: left;
		}

		.img1 {
			width: 25px;
			height: 25px;
			margin-left: 10px;
			right: 5px;
		}
	}

	.img2 {
		height: 18px;
		width: 18px;
	}

	.huan {
		font-size: 12px;
		white-space: nowrap;
		/* 文字一行显示 */
		line-height: 16.5px;
		margin-left: 5px;
	}
</style>